<route lang="yaml">
meta:
  layout: home
  title: 我的发帖
  savedPosition: true
</route>

<template>

  <div class=" bg-white" v-loading="loading">
    <div class="text-2xl flex justify-between items-center px-8  leading-16! divide_b">
      <div>发帖</div> 
    </div>

    <!-- 内容版块 -->
    <div v-if="articleList.length !== 0">
      <ul>
        <li :key="item?._id" v-for="item in articleList"  class="p-4 divide_b mb-list-font relative truncate">
          <!-- 时间 -->
          <div class="flex justify-start items-center relative">
            <div class="i-carbon-time h3 wh-4! md:wh-5! sm:mr-2 mr-1" />
            <div><span class="text-sm h3 sm:text-sm md:text-base lg:text-base">{{dateFormat(item?.createdAt)}}</span></div>
          </div>
          <RouterLink @mouseenter="titleHover($event)" @mouseleave="titleHover($event)" :to="`/article/${item?._id}`">
            <!-- 标题 -->
            <div class="title truncate text-xl font-bold">{{item?.title}}</div>
          </RouterLink>
          <!-- 文章文本 -->
          <div class="h3 text-base truncate texts">{{item?.text}}</div>
          <!-- 文章图片 -->
          <div v-if="item?.images?.length !== 0" class="flex justify-start ">
            <template v-for="img,index in item?.images?.slice(0,3)" :key="img?._id">          
              <el-image    
                class="px-1 wh-24"
                :src="IMG_URL_SERVER +img?.url"
                :preview-src-list="item?.images?.slice(0, 3)?.map((val: any) => IMG_URL_SERVER +val.url)"
                :initial-index="index"
                :alt="img?.name"
                fit="cover"
              />  
            </template>
          </div>
          <!-- 文章数据 -->
          <div class="flex justify-end opacity-70">
            <div class="flex items-center">
              <div class="wh-5 mx-2 i-carbon-view"></div>
              <span>{{item?.read}}</span>
            </div>

            <RouterLink :to="`/article/${item?._id}#reply`">
              <div class="flex items-center cursor-pointer">
                <div class="wh-5 mx-2 i-carbon-chat"></div>
                <span>{{item?.comments}}</span>
              </div>
            </RouterLink>
            <div class="flex items-center">
              <div class="wh-5 mx-2 i-carbon-thumbs-up"></div>
              <span>{{item?.praise}}</span>
            </div>
          </div>

          <div class="absolute right-8 top-5" v-if="authStore.isAuthenticated && pageAuth">
            <el-dropdown trigger="click" >
              <div class=" wh-6! cursor-pointer i-carbon-operations-record"></div>
              <template #dropdown>
                <el-dropdown-menu>
                  <RouterLink :to="`/bbs/newArticle/${item?._id}`" >
                    <el-dropdown-item >
                      编辑
                    </el-dropdown-item>
                  </RouterLink>
                  <el-dropdown-item @click="setDelTopic(item?._id)">删除</el-dropdown-item>
                  

                </el-dropdown-menu>
              </template>
            </el-dropdown>
            
          </div>
        </li>
        <el-dialog v-model="delDialogVisible" title="提示" width="30%" align-center>
          <span>确认要删除吗？</span>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="delDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="delTopic">
                确认
              </el-button>
            </span>
          </template>
        </el-dialog>
      </ul>
      <div class="text-center py-2">没有更多的数据了</div>
    </div>
    <div v-else-if="articleList.length === 0">
      <el-empty description="暂时没有数据哟" :image-size="200" />
    </div>
  </div>

</template>

<script setup lang="ts">
import { fetchUserTopicList, fetchDelTopic } from "@/server";
import { IMG_URL_SERVER } from "@/config"
import { dateFormat } from "@/utils"
import { storeToRefs } from "pinia"

//route
const route = useRoute()
//用户的文章列表
const articleList:any = ref([])
//等待加载
const loading = ref(true)
//弹出取消关注对话框
const delDialogVisible = ref(false)
//重载
const { reloadFlag,handleReload } = inject<any>("reload")
//登录用户store
const authStore = useAuthStore()
const { user:auth} = storeToRefs(authStore)
//普通用户store
const userStore = useUserStore()
const { user } = storeToRefs(userStore)
//判断当前是否登录用户页面
const pageAuth = computed(()=>{
  return auth.value._id === user.value._id
})
'';




//标题样式
const titleHover = (e:any)=>{
  if(e.type==="mouseenter"){
    e.target.querySelector('.title').classList.add("text-blue-400")
  }else{
    e.target.querySelector('.title').classList.remove("text-blue-400")
  } 
}

//删除帖子
let item_id = ref('')
const setDelTopic = (id: string)=>{
  item_id.value = id
  delDialogVisible.value = true
}

const delTopic = ()=>{
  delDialogVisible.value = false
  loading.value = true
  fetchDelTopic(item_id.value).then(()=>{
    handleReload(50)
    setTimeout(() => {
      loading.value = false
    }, 250)
  })
}


//更新时发送fetch
watchEffect(()=>{
  if (route.params.id && reloadFlag.value){
    //获取帖子
    fetchUserTopicList(route.params.id as string,()=>true).then((data)=>{  
      articleList.value = data
      setTimeout(() => {
        loading.value = false
      }, 300)
    })
  }

},{flush:'post'})

</script>

<style scoped lang="scss">

.mb-list-font{
  @media screen and (min-width:768px) and (max-width:1024px){
    font-size: 0.95em;
    .title{
      font-size: 1.34rem;
      line-height: 1.58rem;
    }
    .texts{
      font-size: 1.18rem;
      line-height: 1.42rem;
    }
  }
  @media screen and (min-width:640px) and (max-width:768px){
    font-size: 0.95em;
    .title{
      font-size: 1.22rem;
      line-height: 1.54rem;
    }
    .texts{
      font-size: 1.1rem;
      line-height: 1.35rem;
    }
  }
  @media screen and (max-width:640px){
    font-size: 0.95em;
    .title{
      font-size: 1.15rem;
      line-height: 1.4rem;
    }
    .texts{
      font-size: 0.94rem;
      line-height: 1.3rem;
    }
  }
}
</style>


